<div class="gn-drawmap-panel">
  <div class="row">
    <!--Region picker-->
    <label class="col-sm-3 control-label"
           data-translate="">chooseRegion</label>
    <div class="col-md-8">
      <div data-gn-region-picker=""></div>
    </div>
  </div>

  <div class="row">
    <div class="form-group gn-field" data-ng-show="identifierRef !== undefined">
      <label class="col-sm-3 control-label"
            data-translate="">bboxIdentifier</label>
      <div class="col-sm-8 gn-value">
        <div class="input-group">
          <input class="form-control"
                 data-ng-model="identifier"
                 name="{{identifierRef}}"
                 ng-disabled="readOnly"/>
          <span class="input-group-btn">
            <a class="btn btn-default" data-ng-click="identifier = ''">
              <i class="fa fa-times"></i>
            </a>
          </span>
        </div>
      </div>
    </div>
    <div class="form-group gn-field" data-ng-show="descriptionRef !== undefined">
      <label class="col-sm-3 control-label"
            data-translate="">bboxDescription</label>
      <div class="col-sm-8 gn-value">
        <div class="input-group">
          <input class="form-control"
                 data-ng-model="description"
                 name="{{descriptionRef}}"
                 ng-disabled="readOnly"/>
          <span class="input-group-btn">
            <a class="btn btn-default" data-ng-click="description = ''">
              <i class="fa fa-times"></i>
            </a>
          </span>
        </div>
      </div>
    </div>
  </div>
  <!-- Hidden field that match xml metadata schema -->
  <div class="hidden">
    <input data-ng-model="extent.md[0]" name="{{hleftRef}}"/>
    <input data-ng-model="extent.md[1]" name="{{hbottomRef}}"/>
    <input data-ng-model="extent.md[2]" name="{{hrightRef}}"/>
    <input data-ng-model="extent.md[3]" name="{{htopRef}}"/>
    <input data-ng-model="dcExtent" name="{{dcRef}}"/>
  </div>

  <!--Map and coordinates inputs-->
  <div>
    <div class="gn-editor-map-toolbar clearfix">
      <!--Projection selector-->
      <div class="pull-left" data-ng-show="projs.list.length > 1">
        <div class="btn-group">
          <button type="button" class="btn btn-default dropdown-toggle"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                  title="{{'chooseAProj' | translate}}">
            {{projs.formLabel}} <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li data-ng-repeat="proj in projs.list">
              <a href="" data-ng-click="projs.form = proj.code; projs.formLabel = proj.label">
                {{proj.label}}
              </a>
            </li>
          </ul>
        </div>
      </div>
      <!--Draw Button-->
      <div class=" pull-right" ng-if="!readOnly">
        <button class="btn btn-default"
                title="{{'clickToDrawABox' | translate}}"
                data-ng-click="drawMap()"
                data-ng-class="{active : drawing}">
          <i class="fa fa-pencil"></i>&nbsp;<span data-translate="">drawRectangle</span>
        </button>
      </div>
    </div>
    <div class="gn-editor-map">
      <span>
        <div class="input-group coord coord-north">
          <input data-ng-model="extent.form[3]"
                 type="number"
                 id="drawbbox-top"
                 placeholder="{{'north' | translate}}"
                 data-ng-change="updateBbox(true)"
                 ng-disabled="readOnly"/>
          <span class="input-group-addon hidden-xs">N</span>
        </div>
        <div class="input-group coord coord-south">
          <input data-ng-model="extent.form[1]"
                 type="number"
                 id="drawbbox-bottom"
                 placeholder="{{'south' | translate}}"
                 data-ng-change="updateBbox(true)"
                 ng-disabled="readOnly"/>
          <span class="input-group-addon hidden-xs">S</span>
        </div>
        <div class="input-group coord coord-east">
          <input data-ng-model="extent.form[2]"
                 type="number"
                 id="drawbbox-right"
                 placeholder="{{'east' | translate}}"
                 data-ng-change="updateBbox(true)"
                 ng-disabled="readOnly"/>
          <span class="input-group-addon hidden-xs">E</span>
        </div>
        <div class="input-group coord coord-west">
          <input data-ng-model="extent.form[0]"
                 type="number"
                 id="drawbbox-left"
                 placeholder="{{'west' | translate}}"
                 data-ng-change="updateBbox(true)"
                 ng-disabled="readOnly"/>
          <span class="input-group-addon hidden-xs">W</span>
        </div>
      </span>
      <table>
        <tr>
          <td>
            <div ng-if="map" ol-map="map"></div>
          </td>
        </tr>
      </table>
    </div>
    
  </div>
</div>
